クライアントサイドのイメージマップ

クリッカブルイメージ (またはイメージマップ) では、ユーザがイメージ上の他のページにリンクしている領域をクリックできます。座標の処理をサポートするために特別なサーバーまたは cgi を必要とする 2 種類のイメージマップ ( CERN と NCSA フォーマット) があります。これらのイメージマップは、座標と URL のリストで構成され、イメージ上でリンクの付けられた領域を指定します。

このような種類のマップは、メンテナンスにやや困難なところが有り、 HTML 3.2ではイメージマップの新しい標準が導入されました：

Netscape Navigator 2.0 と Internet Explorer 3.0 のどちらにおいても、マップの記述をHTML の中に直接置くことができ、ユーザがイメージの特定の領域を選択(クリックまたはタップ)すると、ブラウザは処理を実行します。このようなイメージの種類を、クライアントサイド・イメージマップと呼びます。以下にその例を示します：

Contents JavaScript Frames
イメージマップの作り方

クリッカブルマップにするイメージを作成し、 GIFイメージに変換しておきます。

HTML Assistant の Image トピックを使って、イメージをあなたのページに挿入します。

テキストフィールド Filename:にGIF ファイルの名前を入力します(例；map_image.gif) 。イメージの幅と高さも入力します。

テキストフィールド Image Map URL for linking definitionsに、頭に # を付けて名前を入力します(例；#my_menu) 。

Is Mapボックスのチェック (または Enter URL to link への入力) は必要ありません- これらは、後でマップタグの中でやります。 Border size ボックスをチェックして、値にゼロを指定できます。

IMG タグのすぐ上を選択しておき、メニュー Tags : Image Map からタグのMap Definition を選択して挿入します。マップの名前を "EnterNameHere"から、"my_menu"に変更します.

表示は、以下のようになっているでしょう： 

<MAP NAME="my_menu">
</MAP><IMG SRC="map_image.gif" WIDTH="321" HEIGHT="81" BORDER="0" USEMAP="#my_menu">

<MAP> ... </MAP> タグの間にメニュー Tags : Image Map から Linked Area in Image Map タグを選択して挿入します。それぞれの領域がリンクを含むよう定義しなければなりません。 

<AREA COORDS="left,top,right,bottom" HREF="EnterURLhere">

ジャンプするページへのパスを指定し、イメージの座標を入力します。

以下のシェアウェアアプリケーションは、ビジュアルなイメージマップを制作するのに使用できます： これらのアプリケーションへのショートカットがWeb Tools メニューのサブメニューGraphic Toolsで使用できます。option キーを押しながらメニューでアプリケーションを選択すると、そのアプリケーションの説明が表示されます。

シェアウェアの GraphicConverter アプリケーションを使って、クライアントサイド・イメージマップの COORDS 属性の値を見付けることもできます。

GIF イメージを GraphicConverter で開きます
カーソルを、イメージの中でリンクとして働く長方形の左上の角に置きます。
X 座標を Left の値にします
Y 座標を Top の値にします

カーソルを、長方形の右下の角に置きます。
X 座標を Right の値にします
Y 座標を Bottom の値にします

上記のイメージマップは、以下のようになります： 

<MAP NAME="my_menu"><AREA COORDS="9,9,132,29" HREF="../index.html" ALT="Contents"> 
<AREA COORDS="148,9,305,34" HREF="../JavaScript/index.html" ALT="JavaScript"><AREA COORDS="96,44,205,67" HREF="../Frames/example2.html" ALT="Frames"> 
</MAP>
<IMG SRC="map_image.gif" WIDTH="321" HEIGHT="81" BORDER="0" USEMAP="#my_menu">
互換性について：
クライアントサイド・イメージマップをサポートしていない旧式のブラウサでの互換性を保つために、イメージのどこをクリックしてもリンクするページを追加しておくことができます。この場合、このイメージは旧式のブラウサではリンクの付いた通常のイメージとして働きます： 
<MAP NAME="my_menu"><AREA COORDS="9,9,132,29" HREF="../index.html" ALT="Contents"> 
<AREA COORDS="148,9,305,34" HREF="../JavaScript/index.html" ALT="JavaScript"><AREA COORDS="96,44,205,67" HREF="../Frames/example2.html" ALT="Frames"> 
</MAP>
<A HREF="../index.html"><IMG SRC="map_image.gif" WIDTH="321" HEIGHT="81" BORDER="0" USEMAP="#my_menu"></A>

Contents JavaScript Frames